<template>
    <!-- #ifndef APP-NVUE -->
    <button
        :hover-start-time="Number(hoverStartTime)"
        :hover-stay-time="Number(hoverStayTime)"
        :form-type="formType"
        :open-type="openType"
        :app-parameter="appParameter"
        :hover-stop-propagation="hoverStopPropagation"
        :send-message-title="sendMessageTitle"
        :send-message-path="sendMessagePath"
        :lang="lang"
        :data-name="dataName"
        :session-from="sessionFrom"
        :send-message-img="sendMessageImg"
        :show-message-card="showMessageCard"
        @getphonenumber="getphonenumber"
        @getuserinfo="getuserinfo"
        @error="error"
        @opensetting="opensetting"
        @launchapp="launchapp"
        :hover-class="!disabled && !loading ? 'xl-button--active' : ''"
        class="xl-button u-reset-button"
        :style="[{width: $xl.parseUnit(width, 'rpx'), height: buttonHeight, margin: $xl.parseUnit(margin, 'rpx')}, baseColor, $xl.convertStyle(customStyle)]"
        @click.stop="clickHandler"
        :class="[!color ? `xl-button--${type}`: '', `xl-button--${shape}`, `xl-button--${size}`, disabled ? 'xl-button--disabled': '', plain ? 'xl-button--plain': '', hairline ? 'xl-button--hairline': '']"
    >
        <template v-if="loading">
			<xl-loading :type="loadingMode" :size="loadingSize" :color="loadingColor"></xl-loading>
            <text class="xl-button__loading-text" :style="[{ fontSize: textSize + 'px' }]">{{ text }}</text>
        </template>
        <template v-else>
            <xl-icon
                v-if="icon"
                :name="icon"
                :color="iconColorCom"
                :size="textSize * 1.35"
				:right="3"
            ></xl-icon>
            <slot>
                <text
                    class="xl-button__text"
                    :style="[{ fontSize: textSize + 'px' }]"
                    >{{ text }}</text
                >
            </slot>
        </template>
    </button>
    <!-- #endif -->

    <!-- #ifdef APP-NVUE -->
    <view
        :hover-start-time="Number(hoverStartTime)"
        :hover-stay-time="Number(hoverStayTime)"
        class="xl-button"
        :hover-class="
            !disabled && !loading && !color && (plain || type === 'info')
                ? 'xl-button--active--plain'
                : !disabled && !loading && !plain
                ? 'xl-button--active'
                : ''
        "
        @tap="clickHandler"
        :class="[!color ? `xl-button--${type}`: '', `xl-button--${shape}`, `xl-button--${size}`, disabled ? 'xl-button--disabled': '', plain ? 'xl-button--plain': '', hairline ? 'xl-button--hairline': '']"
        :style="[{width: $xl.parseUnit(width, 'rpx'), height: buttonHeight, margin: $xl.parseUnit(margin, 'rpx')}, baseColor, $xl.convertStyle(customStyle)]"
    >
        <template v-if="loading">
            <!-- <xl-loading :type="loadingMode" :size="loadingSize" :color="loadingColor"></xl-loading> -->
            <text
                class="xl-button__loading-text"
                :style="[nvueTextStyle]"
                :class="[plain && `xl-button__text--plain--${type}`]"
                >{{ text }}</text
            >
        </template>
        <template v-else>
            <xl-icon
                v-if="icon"
                :name="icon"
                :color="iconColorCom"
                :size="textSize * 1.35"
            ></xl-icon>
            <text
                class="xl-button__text"
                :style="[
                    {
                        marginLeft: icon ? '2px' : 0,
                    },
                    nvueTextStyle,
                ]"
                :class="[plain && `xl-button__text--plain--${type}`]"
                >{{ text }}</text
            >
        </template>
    </view>
    <!-- #endif -->
</template>

<script setup>
	import { ref, computed, watch, onMounted, nextTick } from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	
	const baseColor = computed(()=>{
		let style = {};
		if (props.textColor) style.color = props.textColor;
		if (props.color) {
			// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
			style.color = props.textColor ? props.textColor : props.plain ? props.color : "white";
			if (!props.plain) {
				// 非镂空，背景色使用自定义的颜色
				style["background-color"] = props.color;
			}
			if (props.color.indexOf("gradient") !== -1) {
				// 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
				// weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
				// 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
				style.borderTopWidth = 0;
				style.borderRightWidth = 0;
				style.borderBottomWidth = 0;
				style.borderLeftWidth = 0;
				if (!props.plain) {
					style.backgroundImage = props.color;
				}
			} else {
				// 非渐变色，则设置边框相关的属性
				style.borderColor = props.color;
				style.borderWidth = "1px";
				style.borderStyle = "solid";
			}
		}
		return style;
	})
	
	// 字体大小
	const buttonHeight = computed(()=>{
		let height = props.height ? props.height : props.size === "normal" ? 42 : props.size === "small" ? 30:props.size === "mini" ? 22 : props.size === "large" ? 50 : 42;
		return uni.$xl.parseUnit(height, 'px');
	})
	
	// 字体大小
	const textSize = computed(()=>{
		return props.fontSize ? props.fontSize : props.size === "normal" ? 16 : props.size === "small" ? 14:props.size === "mini" ? 12 : props.size === "large" ? 18 : 16;
	})
	
	const colors = { primary: '#3c9cff', info: '#909399', default: '#909399', warning: '#f9ae3d', error: '#f56c6c', success: '#5ac725'}
	
	// loading颜色
	const loadingColor = computed(()=>{
		return props.textColor ? props.textColor : props.plain ? (props.color ? props.color : colors[props.type]) : (props.type === "info" ? "#333" : "#fff");
	})
	
	// icon颜色
	const iconColorCom = computed(()=>{
		// 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
		// xl-icon的color能接受一个主题颜色的值
		return props.iconColor ? props.iconColor : props.plain ? (props.color ? props.color : colors[props.type]) : (props.type === "info" ? "#333" : "#fff")
	})
	
	// nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
	const nvueTextStyle = computed(()=>{
		let style = {};
		// 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
		if (props.type === "info") {
			style.color = "#323233";
		}
		if (props.color) {
			style.color = props.textColor ? props.textColor : props.plain ? props.color : "white";
		}
		style.fontSize = textSize.value + "px";
		return style;
	})

	const emits = defineEmits(['click', 'getphonenumber', 'getuserinfo', 'error', 'opensetting', 'launchapp'])
	function clickHandler() {
	    // 非禁止并且非加载中，才能点击
	    if (!props.disabled && !props.loading) {
			// 进行节流控制，每this.throttle毫秒内，只在开始处执行
			uni.$xl.throttle(() => {
				emits("click");
			}, props.throttleTime);
	    }
	}
	
	// 下面为对接uniapp官方按钮开放能力事件回调的对接
	function getphonenumber(res) {
	    emits("getphonenumber", res);
	}
	function getuserinfo(res) {
	    emits("getuserinfo", res);
	}
	function error(res) {
	    emits("error", res);
	}
	function opensetting(res) {
	    emits("opensetting", res);
	}
	function launchapp(res) {
	    emits("launchapp", res);
	}
</script>

<style lang="scss" scoped>
/* #ifndef APP-NVUE */
// nvue下hover-class无效
$xl-button-before-top:50% !default;
$xl-button-before-left:50% !default;
$xl-button-before-width:100% !default;
$xl-button-before-height:100% !default;
$xl-button-before-transform:translate(-50%, -50%) !default;
$xl-button-before-opacity:0 !default;
$xl-button-before-background-color:#000 !default;
$xl-button-before-border-color:#000 !default;
$xl-button-active-before-opacity:.15 !default;
$xl-button-icon-margin-left:4px !default;
$xl-button-plain-xl-button-info-color: #909399;
$xl-button-plain-xl-button-success-color:#5ac725;
$xl-button-plain-xl-button-error-color:#f56c6c;
$xl-button-plain-xl-button-warning-color:#f9ae3d;

.xl-button {
	
	&__text {
		white-space: nowrap;
		line-height: 1;
	}
	
	&:before {
		position: absolute;
		top:$xl-button-before-top;
		left:$xl-button-before-left;
		width:$xl-button-before-width;
		height:$xl-button-before-height;
		border: inherit;
		border-radius: inherit;
		transform:$xl-button-before-transform;
		opacity:$xl-button-before-opacity;
		content: " ";
		background-color:$xl-button-before-background-color;
		border-color:$xl-button-before-border-color;
	}
	
	&--active {
		&:before {
			opacity: .15
		}
	}
	
	&__icon+&__text:not(:empty),
	&__loading-text {
		margin-left:$xl-button-icon-margin-left;
	}
	
	&--plain {
		&.xl-button--primary {
			color: #3c9cff;
		}
	}
	
	&--plain {
		&.xl-button--info {
			color:$xl-button-plain-xl-button-info-color;
		}
	}
	
	&--plain {
		&.xl-button--success {
			color:$xl-button-plain-xl-button-success-color;
		}
	}
	
	&--plain {
		&.xl-button--error {
			color:$xl-button-plain-xl-button-error-color;
		}
	}
	
	&--plain {
		&.xl-button--warning {
			color:$xl-button-plain-xl-button-warning-color;
		}
	}
}
/* #endif */

/* #ifdef APP-NVUE */
$xl-button-active-opacity:0.75 !default;
$xl-button-loading-text-margin-left:4px !default;
$xl-button-text-color: #FFFFFF !default;
$xl-button-text-plain-error-color: #f56c6c !default;
$xl-button-text-plain-warning-color:#f9ae3d !default;
$xl-button-text-plain-success-color:#5ac725 !default;
$xl-button-text-plain-info-color:#909399 !default;
$xl-button-text-plain-primary-color:#3c9cff !default;
.xl-button {
	&--active {
		opacity: $xl-button-active-opacity;
	}
	
	&--active--plain {
		background-color: rgb(217, 217, 217);
	}
	
	&__loading-text {
		margin-left:$xl-button-loading-text-margin-left;
	}
	
	&__text,
	&__loading-text {
		color:$xl-button-text-color;
	}
	
	&__text--plain--error {
		color:$xl-button-text-plain-error-color;
	}
	
	&__text--plain--warning {
		color:$xl-button-text-plain-warning-color;
	}
	
	&__text--plain--success{
		color:$xl-button-text-plain-success-color;
	}
	
	&__text--plain--info {
		color:$xl-button-text-plain-info-color;
	}
	
	&__text--plain--primary {
		color:$xl-button-text-plain-primary-color;
	}
}
/* #endif */
$xl-button-text-font-size: 15px !default;
$xl-button-loading-text-font-size: 15px !default;
$xl-button-loading-text-margin-left: 4px !default;
$xl-button-large-width: 100% !default;
$xl-button-normal-padding: 0 12px !default;
$xl-button-large-padding: 0 15px !default;
$xl-button-normal-font-size: 14px !default;
$xl-button-small-min-width: 60px !default;
$xl-button-small-padding: 0px 8px !default;
$xl-button-mini-padding: 0px 8px !default;
$xl-button-small-font-size: 12px !default;
$xl-button-mini-font-size: 10px !default;
$xl-button-mini-min-width: 50px !default;
$xl-button-disabled-opacity: 0.7 !default;
$xl-button-info-color: #323233 !default;
$xl-button-info-background-color: #fff !default;
$xl-button-info-border-color: #ebedf0 !default;
$xl-button-info-border-width: 1px !default;
$xl-button-info-border-style: solid !default;
$xl-button-success-color: #fff !default;
$xl-button-success-background-color: #5ac725 !default;
$xl-button-success-border-color: $xl-button-success-background-color !default;
$xl-button-success-border-width: 1px !default;
$xl-button-success-border-style: solid !default;
$xl-button-primary-color: #fff !default;
$xl-button-primary-background-color: #3c9cff !default;
$xl-button-primary-border-color: $xl-button-primary-background-color !default;
$xl-button-primary-border-width: 1px !default;
$xl-button-primary-border-style: solid !default;
$xl-button-error-color: #fff !default;
$xl-button-error-background-color: #f56c6c !default;
$xl-button-error-border-color: $xl-button-error-background-color !default;
$xl-button-error-border-width: 1px !default;
$xl-button-error-border-style: solid !default;
$xl-button-warning-color: #fff !default;
$xl-button-warning-background-color: #f9ae3d !default;
$xl-button-warning-border-color: $xl-button-warning-background-color !default;
$xl-button-warning-border-width: 1px !default;
$xl-button-warning-border-style: solid !default;
$xl-button-block-width: 100% !default;
$xl-button-circle-border-top-right-radius: 100px !default;
$xl-button-circle-border-top-left-radius: 100px !default;
$xl-button-circle-border-bottom-left-radius: 100px !default;
$xl-button-circle-border-bottom-right-radius: 100px !default;
$xl-button-square-border-top-right-radius: 5px !default;
$xl-button-square-border-top-left-radius: 5px !default;
$xl-button-square-border-bottom-left-radius: 5px !default;
$xl-button-square-border-bottom-right-radius: 5px !default;
$xl-button-icon-min-width: 1em !default;
$xl-button-plain-background-color: #fff !default;
$xl-button-hairline-border-width: 0.5px !default;

.xl-button {
    position: relative;
    align-items: center;
    justify-content: center;
    /* #ifndef APP-NVUE */
    display: flex;
	box-sizing: border-box;
    /* #endif */
    flex-direction: row!important;
    flex-direction: row;

    &__text {
        font-size: $xl-button-text-font-size;
    }

    &__loading-text {
        font-size: $xl-button-loading-text-font-size;
        margin-left: $xl-button-loading-text-margin-left;
    }

    &--large {
        /* #ifndef APP-NVUE */
        width: $xl-button-large-width;
        /* #endif */
        padding: $xl-button-large-padding;
    }

    &--normal {
        padding: $xl-button-normal-padding;
        font-size: $xl-button-normal-font-size;
    }

    &--small {
        /* #ifndef APP-NVUE */
        min-width: $xl-button-small-min-width;
        /* #endif */
        padding: $xl-button-small-padding;
        font-size: $xl-button-small-font-size;
    }

    &--mini {
        font-size: $xl-button-mini-font-size;
        /* #ifndef APP-NVUE */
        min-width: $xl-button-mini-min-width;
        /* #endif */
        padding: $xl-button-mini-padding;
    }

    &--disabled {
        opacity: $xl-button-disabled-opacity;
    }

    &--info {
        color: $xl-button-info-color;
        background-color: $xl-button-info-background-color;
        border-color: $xl-button-info-border-color;
        border-width: $xl-button-info-border-width;
        border-style: $xl-button-info-border-style;
    }

    &--success {
        color: $xl-button-success-color;
        background-color: $xl-button-success-background-color;
        border-color: $xl-button-success-border-color;
        border-width: $xl-button-success-border-width;
        border-style: $xl-button-success-border-style;
    }

    &--primary {
        color: $xl-button-primary-color;
        background-color: $xl-button-primary-background-color;
        border-color: $xl-button-primary-border-color;
        border-width: $xl-button-primary-border-width;
        border-style: $xl-button-primary-border-style;
    }

    &--error {
        color: $xl-button-error-color;
        background-color: $xl-button-error-background-color;
        border-color: $xl-button-error-border-color;
        border-width: $xl-button-error-border-width;
        border-style: $xl-button-error-border-style;
    }

    &--warning {
        color: $xl-button-warning-color;
        background-color: $xl-button-warning-background-color;
        border-color: $xl-button-warning-border-color;
        border-width: $xl-button-warning-border-width;
        border-style: $xl-button-warning-border-style;
    }

    &--block {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row!important;
        width: $xl-button-block-width;
    }

    &--circle {
        border-top-right-radius: $xl-button-circle-border-top-right-radius;
        border-top-left-radius: $xl-button-circle-border-top-left-radius;
        border-bottom-left-radius: $xl-button-circle-border-bottom-left-radius;
        border-bottom-right-radius: $xl-button-circle-border-bottom-right-radius;
    }

    &--square {
        border-bottom-left-radius: $xl-button-square-border-top-right-radius;
        border-bottom-right-radius: $xl-button-square-border-top-left-radius;
        border-top-left-radius: $xl-button-square-border-bottom-left-radius;
        border-top-right-radius: $xl-button-square-border-bottom-right-radius;
    }

    &__icon {
        /* #ifndef APP-NVUE */
        min-width: $xl-button-icon-min-width;
        line-height: inherit !important;
        vertical-align: top;
        /* #endif */
    }

    &--plain {
        background-color: $xl-button-plain-background-color;
    }

    &--hairline {
        border-width: $xl-button-hairline-border-width !important;
    }
	/* 取消 UniButton 组件的默认样式 */
	&::after {
	  display: none;
	}
}



</style>
